<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    Document
                </title>
            </meta>
        </meta>
    </head>
    <body>
        <svg height="400" version="1.1" width="450" xmlns="http://www.w3.org/2000/svg">
            <path d="M 100 350 l 150 -300" fill="none" id="lineAB" stroke="red" stroke-width="3">
            </path>
            <path d="M 250 50 l 150 300" fill="none" id="lineBC" stroke="red" stroke-width="3">
            </path>
            <path d="M 175 200 l 150 0" fill="none" stroke="green" stroke-width="3">
            </path>
            <path d="M 100 350 q 150 -300 300 0" fill="none" stroke="blue" stroke-width="5">
            </path>
            <!-- Mark relevant points -->
            <g fill="yellow" stroke="black" stroke-width="3">
                <circle cx="100" cy="350" id="pointA" r="3">
                </circle>
                <circle cx="250" cy="50" id="pointB" r="3">
                </circle>
                <circle cx="400" cy="350" id="pointC" r="3">
                </circle>
            </g>
            <!-- Label the points -->
            <g fill="black" font="sans-serif" font-size="30" stroke="none" text-anchor="middle">
                <text dx="-30" x="100" y="350">
                    A
                </text>
                <text dy="-10" x="250" y="50">
                    B
                </text>
                <text dx="30" x="400" y="350">
                    C
                </text>
            </g>
        </svg>
    </body>
</html>